<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script src="/resources/js/jquery.1.9.1.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/resources/js/scrollpagination.js"></script>
<title>Truyện cười bốn phương</title>
</head>
<body>
	<script>
		$(function() {
			loadedSize = 1;
			$('#jokesContent').scrollPagination({
				'contentPage' : "/loadJoke", // the url you are fetching the results
				//'contentData' : {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
				'scrollTarget' : $(window), // who gonna scroll? in this example, the full window
				'heightOffset' : 140, // it gonna request when scroll is 10 pixels before the page ends
				'beforeLoad' : function() { // before load function, you can display a preloader div
					$('#loader').fadeIn();
					if (loadedSize != $('#jokesContent').children().size()) {
						loadedSize = $('#jokesContent').children().size();
						$(this)[0].contentData = {
							loadedSize : loadedSize
						};
					} else {
						$(this)[0].contentData = {
							loadedSize : -1
						};
					}

				},
				'afterLoad' : function(elementsLoaded) { // after loading content, you can use this function to animate your new elements
					$('#loader').fadeOut();
				}
			});

		});
	</script>

	<tiles:insertDefinition name="mobileDefaultTemplate">
		<tiles:putAttribute name="body">
			<div id="mainContainer">
				<div class="mainBox">
					<div class="subHeading">
						<h3>Những câu chuyện cười bốn phương</h3>
					</div>
					<div id="jokesContent" class="newsList jokeList">
						<c:forEach items="${jokeList}" var="jokeItem">
							<div class="newsListItem jokeListItem">
								<div class="listItemSeparator"></div>
								<div class="thumbnail-joke">
									<a href="truyen-cuoi/${jokeItem.id}" target="_blank"> <img
										src="/resources/data/joke-thumbnails/${jokeItem.image}" alt="${jokeItem.title}"
										class="thumbImg-joke">
									</a>
								</div>
								<div class="info-joke" style="position: relative;">
									<h2>
										<a style="font-size: 18px;" target="_blank"
											href="truyen-cuoi/${jokeItem.id}">${jokeItem.title}</a>
									</h2>
									<div class="uploader">
										<div style="float: left; padding-top: 5px">
											Đăng bởi <a href="/uploader/${jokeItem.uploader.id}">${jokeItem.uploader.name}</a>
										</div>
										<div class="stats">
											<div class="viewComments" style="margin-left: 15px;">
												<span class="views" title="lượt xem"><fmt:formatNumber pattern="#,###,##0" value="${jokeItem.viewNumber}"/></span>
												<span class="comments" title="lượt bình luận"><fmt:formatNumber pattern="#,###,##0" value="${jokeItem.commentNumber}"/></span>
											</div>
										</div>
									</div>
									<div class="headerJokeContent">${jokeItem.headerContent}
										...</div>

								</div>
							</div>
						</c:forEach>
					</div>
					<div id="loader" class="loader">
						<span></span> <span></span> <span></span> Loading...
					</div>
				</div>
			</div>
		</tiles:putAttribute>
	</tiles:insertDefinition>
</body>
</html>